<template>
    <div>
        <h1>显示权益列表</h1>
        会员等级名称：
        <input type="text" v-model="find.name">
        权益名称：
        <select v-model="find.qid">
         <option value="0">请选择</option>
         <option v-for="a in qwery" :value="a.qid">{{a.name  }}</option>
                       </select>
        <input type="button" value="查询" @click="Show">
        <table class="table">
            <thead>
                <tr>
                    <td>等级ID</td>
                    <td>等级名称</td>
                    <td>权益名称</td>
                    <td>等级状态</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody >
                <tr v-for="a in data">
                    <td>{{a.mid  }}</td>
                    <td>{{a.name  }}</td>
                    <td>{{a.qid  }}</td>
                    <td>{{a.start?"启用":"禁用"  }}</td>
                    <td><input type="button" :value="a.start?'禁用':'启用' " @click="upsta(a.qid)">
                       
                    </td>
                </tr>
            </tbody>
        </table>
        <span>
            共{{ total.totalpage }}页，当前第{{find.size  }}页，共{{total.count  }}行，每页{{find.index  }}行
        </span>
        <input type="button" value="首页" @click="Fanye(1)">
        <input type="button" value="上一页" @click="Fanye((find.index)-1)">
        <input type="button" v-for="m in total.totalpage" :value="m" @click="fe(m)">
        <input type="button" value="下一页" @click="Fanye((find.index)+1)">
        <input type="button" value="尾页" @click="Fanye(total.totalpage)">
         <select v-model="find.size" @click="fs">
            <option value="2">请选择</option>
            <option value="3">每页三行</option>
            <option value="5">每页五行</option>
            <option value="6">每页六行</option>
         </select>
         跳转：
         <input type="number" v-model="texta">
         <input type="button" value="跳转"  @change="Fanye(texta)">
    </div>
</template>
<script setup lang="ts">
import {ref,onMounted} from "vue"
import axios from "axios";
const fe=(val:any)=>{
    find.value.index=val;
    Show();
}
const fs=()=>{
    find.value.index=1;
    Show();
}
const Fanye=(val:any)=>{
   if(val>=1 && val<=total.value.totalpage)
   {
     find.value.index=val;
     Show();
   }
}
const qwery=ref([{
    "qid": 0,
  "name": "",
  "shemo": "",
  "start": true
}])
const total=ref({
    count:0,
    totalpage:0
})
const XIala=()=>{
    axios.get("https://localhost:7083/api/Member/XIala").then(res=>{
        qwery.value=res.data
    })
}
const data=ref([{
    "mid": 0,
  "name": "",
  "qid": 1,
  "start": true
}])
const find=ref({
    index:1,
    size:2,
    name:"",
    qid:0
})
onMounted(()=>{
    Show();
    XIala();
})
const Show=()=>{
    axios.get("https://localhost:7083/api/Member/GetMember",{params:find.value}).then(res=>{
          data.value=res.data.data
          total.value.count=res.data.count
          total.value.totalpage=Math.ceil(total.value.count/find.value.size);
    })
}
const upsta=(id:any)=>{
    if(!confirm('确认修改吗')){
        return;
    }
    axios.get("https://localhost:7083/api/Member/UptMember",{params:{id:id}}).then(res=>{
    if(res.data>0){
        alert('修改成功');
        Show();
    }
    else{
        alert('修改失败');
    }
    })
}
</script>
<style scoped></style>
